{% include 'header.html' %}
<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vis/4.21.0/vis.min.js"></script>
  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-body">
          <form class="layui-form" id="userform" action="/servers/server/update" method="POST">
            <div class="layui-form-item layui-form-text">
              <label class="layui-form-label">服务器：</label>
              <div class="layui-input-block">
                <select name="host_data" lay-verify="required">
                  {% for host in hostData %}
                  <option value="{{ host['id'] }}|{{ host['ip'] }}">{{ host['server_name'] }}({{ host['ip'] }})</option>
                  {% endfor %}
                </select>
              </div>
            </div>
          </form>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md4">
        <div class="layui-card">
          <div class="layui-card-header">cpu趋势图</div>
          <div class="layui-card-body">
          <div id="main11" style="height: 400px;"></div>
          </div>
        </div>
      </div>
      <div class="layui-col-md4">
        <div class="layui-card">
          <div class="layui-card-header">内存趋势图</div>
          <div class="layui-card-body">
          <div id="main12" style="height: 400px;"></div>
          </div>
        </div>
      </div>
      <div class="layui-col-md4">
        <div class="layui-card">
          <div class="layui-card-header">磁盘趋势图</div>
          <div class="layui-card-body">
          <div id="main13" style="height: 400px;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
<script>
$(document).ready(function() {
    function refreshContent() {
        $.ajax({
          url: '/servers/aacharts?type=oneline&model=server_monitor&x=count_time&y=cpu&t=server_id&w=server_id|1&ck=server_monitor_cpu_20241029&title=cpu趋势图',
          method: 'GET',
          success: function (data) {
            newdata = JSON.parse(data)
            if(newdata.code == 0){
              var myChart = echarts.init(document.getElementById('main11'));
              eval(newdata.data);
              myChart.setOption(option1);
            }else{
              alert("出错");
            }
          },
          error: function(error) {
            console.log(error);
          }
        });
        $.ajax({
          url: '/servers/aacharts?type=oneline&model=server_monitor&x=count_time&y=mem&t=server_id&w=server_id|1&ck=server_monitor_mem_20241029&title=内存趋势图',
          method: 'GET',
          success: function (data) {
            newdata = JSON.parse(data)
            if(newdata.code == 0){
              var myChart = echarts.init(document.getElementById('main12'));
              eval(newdata.data);
              myChart.setOption(option1);
            }else{
              alert("出错");
            }
          },
          error: function(error) {
            console.log(error);
          }
        });
        $.ajax({
          url: '/servers/aacharts?type=oneline&model=server_monitor&x=count_time&y=cpu&t=server_id&w=server_id|1&ck=server_monitor_disk_20241029&title=磁盘趋势图',
          method: 'GET',
          success: function (data) {
            newdata = JSON.parse(data)
            if(newdata.code == 0){
              var myChart = echarts.init(document.getElementById('main13'));
              eval(newdata.data);
              myChart.setOption(option1);
            }else{
              alert("出错");
            }
          },
          error: function(error) {
            console.log(error);
          }
        });
    }
    setInterval(refreshContent, 30000);  // 每30秒刷新一次
});
</script>
{% include 'footer.html' %}